<template>
  <el-dialog
    title="操作日志"
    :visible.sync="visible"
    width="1000px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    custom-class="log-dialog"
  >
    <div class="log-container">
      <div class="search-section">
        <div class="right-filters">
          <div class="filter-item">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 450px"
              @change="handleDateRangeChange"
            />
          </div>
          
          <div class="filter-item">
            <el-input
              v-model="searchForm.userName"
              placeholder="搜索操作人员"
              style="width: 200px"
              @input="handleSearch"
               prefix-icon="el-icon-search"
              clearable
            />
          </div>
        </div>
      </div>

      <div class="table-section">
        <el-table
          :data="tableData"
          v-loading="loading"
          height="400px"
          stripe
        >
          <el-table-column prop="userName" label="操作人员" />
          <el-table-column prop="content" label="操作内容"  />
          <el-table-column prop="updateTime" label="操作时间"  />
        </el-table>
      </div>

      <div class="pagination-section">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick } from 'vue'
import { getLogList } from '@/api/screen-management/indicator-management'
import type { Response, PageDataList } from '@/utils/type'

interface Props {
  visible: boolean
  indexId: string
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

interface SearchForm {
  start?: string
  end?: string
  userName?: string
}

interface LogItem {
  userName: string
  operationContent: string
  operationTime: string
}

interface Pagination {
  pageIndex: number
  pageSize: number
  total: number
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  indexId: ''
})

const emit = defineEmits<Emits>()

const loading = ref(false)
const tableData = ref<LogItem[]>([])
const dateRange = ref<[string, string] | null>(null)

const searchForm = reactive<SearchForm>({
  start: undefined,
  end: undefined,
  userName: ''
})

const pagination = reactive<Pagination>({
  pageIndex: 1,
  pageSize: 20,
  total: 0
})

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const handleDateRangeChange = (value: [string, string] | null) => {
  if (value) {
    searchForm.start = value[0]
    searchForm.end = value[1]
  } else {
    searchForm.start = undefined
    searchForm.end = undefined
  }
  handleSearch()
}

const fetchLogData = async () => {
  if (!props.indexId) return
  
  loading.value = true
  try {
    const params = {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
      indexId: props.indexId,
      start: searchForm.start,
      end: searchForm.end,
      userName: searchForm.userName || undefined
    }

    const response = await getLogList(params) as unknown as Response<PageDataList<LogItem>>
    
    if (response.success && response.data) {
      tableData.value = response.data.list || []
      pagination.total = response.data.count || 0
    }
  } catch (error) {
    console.error('Failed to fetch log data:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.pageIndex = 1
  fetchLogData()
}

const resetSearch = () => {
  dateRange.value = null
  searchForm.start = undefined
  searchForm.end = undefined
  searchForm.userName = ''
  pagination.pageIndex = 1
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageIndex = 1
  fetchLogData()
}

const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page
  fetchLogData()
}

const handleClose = () => {
  emit('update:visible', false)
}

watch(
  [() => props.visible, () => props.indexId],
  ([newVisible, newIndexId], [oldVisible, oldIndexId]) => {
    if (newVisible && newIndexId) {
      if (!oldVisible) {
        resetSearch()
      }
      fetchLogData()
    }
  }
)
</script>

<style lang="scss" scoped>
.log-container {
  .search-section {
    margin-bottom: 20px;
    
          .right-filters {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
      
      .filter-item {
        display: flex;
        align-items: center;
        gap: 8px;
        
        label {
          font-size: 14px;
          color: #606266;
          white-space: nowrap;
        }
      }
    }
  }

  .table-section {
    margin-bottom: 20px;
  }

  .pagination-section {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

<style lang="scss">
.log-dialog {
  .el-dialog {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }
  
  .el-dialog__header {
    flex-shrink: 0;
  }
  
  .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    max-height: calc(80vh - 120px);
    padding: 20px;
  }
  
  .el-dialog__footer {
    flex-shrink: 0;
  }
}
</style> 